<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- Search Bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 100px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.studentName" 
          placeholder="学生姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.company" 
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          @keyup.enter="handleSearch" 
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button>
      </div>
 
      <!-- Data Table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120"/>
        <el-table-column prop="end_time" label="结束时间" width="120"/>
        <el-table-column prop="studentId" label="学生学号" width="120" align="center"/>
        <el-table-column prop="studentName" label="学生姓名" width="120"/>
        <el-table-column prop="company" label="实习单位名称" width="150"/>
        <el-table-column prop="companyInfo" label="实习单位简介" width="150">
          <template #default="scope">{{ scope.row.companyInfo  || '-' }}</template>
        </el-table-column>
        <el-table-column prop="weeklyScore" label="周报成绩" width="100" align="center"/>
        <el-table-column prop="summaryScore" label="总结成绩" width="100" align="center"/>
        <el-table-column prop="totalScore" label="总成绩" width="100" align="center"/>
        <el-table-column prop="finalScore" label="最终成绩" width="120" align="center">
          <template #default="scope">{{ scope.row.finalScore  || '-' }}</template>
        </el-table-column>
      </el-table>
 
      <!-- Pagination Info -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。
      </div>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
 
// Reactive state 
const filter = reactive({
  id: '',
  name: '',
  studentName: '',
  company: ''
})
 
const originalData = ref([ 
  {
    id: 3,
    name: '生产实习',
    start_time: '2022-01-02',
    end_time: '2023-02-28',
    studentId: '1',
    studentName: '沿停',
    company: '华为',
    companyInfo: '无',
    weeklyScore: '21',
    summaryScore: '100',
    totalScore: '68.40',
    finalScore: '无'
  },
  {
    id: 5,
    name: '生产实习',
    start_time: '2022-01-02',
    end_time: '2023-02-28',
    studentId: '48',
    studentName: '王旭',
    company: '华为',
    companyInfo: '无',
    weeklyScore: '0',
    summaryScore: '0.00',
    totalScore: '无',
    finalScore: '无'
  }
])
 
// Computed properties 
const filteredData = computed(() => {
  return originalData.value.filter(item  => {
    return (
      (!filter.id  || item.id.toString().includes(filter.id))  &&
      (!filter.name  || item.name.includes(filter.name))  &&
      (!filter.studentName  || item.studentName.includes(filter.studentName))  &&
      (!filter.company  || item.company.includes(filter.company)) 
    )
  })
})
 
// Methods 
const handleSearch = () => {
  // Filtering is handled by computed property 
}
 
const handleReset = () => {
  filter.id  = ''
  filter.name  = ''
  filter.studentName  = ''
  filter.company  = ''
}
 
// Initialize 
onMounted(() => {
  // Any initialization code can go here 
})
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-item {
  margin-left: 10px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
 
.el-table .cell {
  white-space: nowrap;
}
</style>